<template>
	<div class="stepsContent">
		<el-steps class="steps" :space="200" :active='step'>
			<template v-for="(vm , index) in stepList">
				<el-step :status="(vm.approvalResult==0||vm.approvalResult==3)?'error':((index < step)? 'success' : (index == step ? 'finish' : 'wait'))" :title="vm.title" :description="vm.name" :dates="vm.date" :button="vm.button" @button-enter="buttonEnter"></el-step>
			</template>
		</el-steps>
		<el-popover class="popover" id="popover" ref="popover" placement="bottom-start" :title="'审核状态：' + status" trigger="click" visible-arrow='false'>
			<p>{{popoverContent}}</p>
			<p v-show="customerAnalysis!=''">{{customerAnalysis}}</p>
		</el-popover>
	</div>
</template>
<script>
export default {
	name: 'stepsContent',
	data() {
		return {
			step: 0,
			stepList: [],
			popoverContent: '',
			customerAnalysis: '',
			taskId: '',
			flowNodeId: '',
			bizType: '',
			status: '',
			applyType: '',
		}
	},
	methods: {
		buttonEnter(vm, event) {
			this.popoverContent = '审核结果：' + this.stepList[vm.index].result;
			if (this.stepList[vm.index].customerAnalysis) {
				this.customerAnalysis = '客户分析：' + this.stepList[vm.index].customerAnalysis;
			} else {
				this.customerAnalysis = '';
			}
			this.status = this.stepList[vm.index].approvalResultDesc;
			document.getElementById('popover').style.left = 200 * vm.index + 20 - $(".el-steps")[0].scrollLeft + 'px';
			this.$refs.popover.doShow();
			let that = this;
			$('body').off('click');
			$('body').on('click', function(event) {
				if (that.$refs.popover.doClose) {
					that.$refs.popover.doClose();
					$('body').off('click');
				}
			});
		},
		getCheckInfo(_id, _orderStatus) {
			this.$http.get('/audit/status/list/' + _id).then((data) => {
				let isFinash = false;
				if (data.data.success) {
					this.stepList = [];
					if (data.data.data) {
						for (var i = 0; i < data.data.data.length; i++) {
							let vm = data.data.data[i];
							// if (vm.nodeType != 2 || vm.approvalRemark) {
							this.stepList.push({
								title: vm.nodeName,
								name: vm.staffName,
								date: vm.handleDate,
								approvalResultDesc: vm.approvalResultDesc,
								approvalResult: vm.approvalResult,
								state: vm.taskStatusDesc,
								button: vm.approvalRemark ? '审核结果' : '',
								result: vm.approvalRemark,
								customerAnalysis: vm.customerAnalysis ? vm.customerAnalysis : ''
							});
							// }

							if (vm.taskStatus == 2 && i == data.data.data.length - 1) {
								isFinash = true;
							}
						};
					}
				}
				console.log(this.stepList.length);

				if (this.stepList.length <= 1 && _orderStatus == 10) {
					this.step = 0;
				} else if (this.stepList.length <= 1 && _orderStatus == 11) {
					this.step = 1;
				} else if (isFinash) {
					this.step = this.stepList.length;
				} else {
					this.step = this.stepList.length - 1;
				}
				console.log(this.step);
			}).catch((error) => {

			});
		}
	},
	mounted() {

	}
}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.stepsContent {
	font-size: 14px;
	color: #475669;
	.steps {
		margin: 0 20px;
		overflow: auto;
	}
	.popover {
		display: block;
		position: relative;
		max-width: 450px;
	}
}

</style>
